<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Mootools :: Drop Menu</title>

<style type="text/css">

body, html {
    
        font-family: Tahoma, sans-serif;
        font-size: 11px;
        color: #EEEEEE;
        background-color: #2A2A2A;
    
    }
   
    a:link, a:active, a:visited {
         color: #FF6600;
    } 
  
    a:hover {
         color: #FFFFCC;
    }

#navigation {
	height: 21px;
}

	#navigation div.primaryNavigation {
		float: left;
		position: relative;
	}
	
		#navigation div.primaryNavigation table td {
			background: #336b84;
			height: 21px;	
		}
		
			#navigation div.primaryNavigation table td a.navbutton {
				height: 21px;
				display: block;
			}
			
			
/* required for subnav droplist */

.subNav {
	z-index: 20;
	position: absolute;
	border: 1px solid red;
	visibility: hidden;
	height: 20px;	
}
		
	.subNav ul{
		list-style:none;
		margin: 0;
		padding: 0;
		min-width: 131px;
		background-color: #FFFFFF
	}
		
		.subNav ul li{
			padding: 3px;
			min-width: 131px;
			cursor: pointer;
			color: #2A2A2A;
		}
		
		.subNav ul li:hover{
			background-color:#0099FF;
			color: #ffffff;
		}

			
</style>

<script type="text/javascript" src="mootools.js"></script>

<script language="javascript" type="text/javascript">

	
window.onload = function() {

	// variable for the list status
	var listStatus = 'closed';
	
	// setup var that holds our opened list's id
	var listOpen;

	// show list function
	var showList = function(lid) {
	
		var listId = lid.replace(/For/g,'');
		
		
		// need to check if there is an open list
		if(listStatus == "open") {
			// check if the open list is the same
			// as toggled list. If not, then we hide it
			if(listId != listOpen) {
				hideList();
			}
		} 
		
		if(listStatus == "closed") {
			// set our list status
			listStatus = 'open';
			
			// set the curent open list id
			listOpen = listId;
			
			// show our list with a little effects
			new fx.Opacity($(listOpen), {duration: 500}).custom(0, 1);
			new fx.Height($(listOpen), {duration: 300}).custom(20, 40);
			new fx.Width($(listOpen), {duration: 300}).custom(20, 131);
			
	
			// we add a timeout so the sublist goes away
			// if the user doesn't click/mouseover another 
			// menu item
			(hideList).delay(15000);
	
		}

	};
	
	// hide list function
	var hideList = function() {
	
		if(listOpen) {
		
			// check if our list is shown already - if so run the effects to hide list
			if($(listOpen).getStyle('visibility') == "visible") {
				new fx.Opacity($(listOpen), {duration: 500}).custom(1, 0);
				new fx.Height($(listOpen), {duration: 300}).custom(40, 20);
				new fx.Width($(listOpen), {duration: 300}).custom(131,20);
			}
			
			// set our list status
			listStatus = 'closed';
			
			// reset open list id
			listOpen = '';
		}
	};
	
	
	$$('a.navbutton').implement({
	
		// initialize the submenu - gets general data in order to attempt to position
		// the submenu in relation to the image/anchor tag that opens it
		initialize: function(){
		
			// check if element has our flag for having a drop menu
			if(this.hasClass('hasSubNav')){
		
				var listId = this.id.replace(/For/g,'');
				
				// have to do it this way.
				// for some reason this.firstChild.getTag() won't work	
				if($Element(this.firstChild, 'getTag') == 'img') {	
					// attempt to set offset to be a little taller
					// than your image
					var yOffset = this.firstChild.height+1;
				} else {
					// set your default offset here
					var yOffset = 20; 
				}
				
				// set the styles of your list
				// to position it (relatively) correctly
				$(listId).setStyles({
				   top: yOffset+'px',
				   left: this.getLeft()+'px'
				});
				

			}
		
		},
		onmouseover: function() {
		
			// add mouseover action to change image
			this.firstChild.src = this.firstChild.src.replace(/off/g,'on');
			
			// optional effect for mouseover
			this.effect('opacity').custom(.3,1);
			
			// check if element has our flag for having a drop menu
			if(this.hasClass('hasSubNav')){
				
				// pass the id of the mouseover, so we can determine 
				// which list to show
				showList(this.id);
			
			}else{
			
				// if the button moused over does not have a list
				// then we close the list since we are obviously
				// on another button now
				if(listStatus == 'open'){
					hideList();
				}
			}	
		},
		onmouseout: function() {
		
			// switch mouseout button
			this.firstChild.src = this.firstChild.src.replace(/on/g,'off');
			
			// optional effect for mouseout
			this.effect('opacity').custom(.3,1);
		}
	});
	

};

</script>
</head>

<body>

<h1>Mootools :: Drop Menu example</h1>
<p><em>/* TODO: work out submenus of the submenus */
<p><a href="index.html">Back to example list</a></p>
<div id="navigation">
	<div class="primaryNavigation">
		<table border="0" cellpadding="0" cellspacing="0">

		  <tr>
		    <td><a href="#" class="navbutton"><img src="images/NAV-home-off.gif" alt="home" name="home" width="48" height="21" border="0" id="home" /></a></td>
			<td><a href="#" class="navbutton"><img src="images/NAV-intranet-off.gif" alt="Intranet" name="intranet" width="65" height="21" border="0" id="intranet" /></a></td>
			<td><a href="#" class="navbutton"><img src="images/NAV-email-off.gif" alt="Email" name="email" width="53" height="21" border="0" id="email" /></a></td>
			<td><a href="#" class="navbutton hasSubNav" id="ForJumpSubnav"><img src="images/NAV-jump-menu-off.gif" alt="Email" name="email" width="102" height="21" border="0" id="email" /></a></td>
			<td><a href="#" class="navbutton hasSubNav" id="ForJumpSubnav2"><img src="images/NAV-jump-menu-off.gif" alt="Email" name="email" width="102" height="21" border="0" id="email" /></a></td>
		  </tr>
		</table>
		<!-- our subnav items -->

		<div id="JumpSubnav" class="subNav">
			<ul id="subnavItems">
				<li>item 1</li>
				<li>item 2</li>
			</ul>
		</div>
		<div id="JumpSubnav2" class="subNav">
			<ul id="subnavItems">

				<li>item 3</li>
				<li>item 4</li>
			</ul>
		</div>
	</div>
	
</div>

</body>
</html>

